//渲染
(function () {
  $(".goods_top").load(
    "http://localhost:81/html/public.html .top_wrap",
    function () {
      if ($.cookie("loadsuccess")) {
        $(".top_right")
          .find("li")
          .first()
          .html("欢迎您" + $.cookie("loadsuccess") + "  <em>注销</em>");
        $(".top_right").find("em").css({
          cursor: "pointer",
          color: "red",
        });
        $(".top_right")
          .find("em")
          .on("click", function () {
            $.cookie("loadsuccess", null);
            window.location.reload();
          });
      }
    }
  );
  // $(".goods_header").load("http://localhost:81/html/public.html .logo_wrap");
  // $(".goods_nav").load(
  //   "http://localhost:81/html/public.html .nav_wrap",
  //   function () {
  //     (function () {
  //       $(".nav_menu").css({
  //         display: "none",
  //       });

  //       $(".nav_first_title").hover(
  //         function () {
  //           $(".nav_menu").css({
  //             display: "block",
  //           });
  //         },
  //         function () {
  //           $(".nav_menu").css({
  //             display: "none",
  //           });
  //         }
  //       );

  //       $(".nav_li").hover(
  //         function () {
  //           $(this)
  //             .css({
  //               background: "black",
  //             })
  //             .find(".menu")
  //             .css({
  //               display: "block",
  //             });
  //         },
  //         function () {
  //           $(this)
  //             .css({
  //               background: "",
  //             })
  //             .find(".menu")
  //             .css({
  //               display: "none",
  //             });
  //         }
  //       );
  //     })();
  //     (function () {
  //       $(".nav ul")
  //         .children("li")
  //         .not($(".nav_first_title"))
  //         .hover(
  //           function () {
  //             $(this)
  //               .css({
  //                 background: "#f03a58",
  //                 color: "#fff",
  //               })
  //               .children("a")
  //               .css({
  //                 color: "#fff",
  //               });
  //           },
  //           function () {
  //             $(this)
  //               .css({
  //                 background: "#fff",
  //                 color: "#000",
  //               })
  //               .children("a")
  //               .css({
  //                 color: "#000",
  //               });
  //           }
  //         );
  //     })();
  //   }
  // );
  // $(".goods_footer").load("http://localhost:81/html/public.html .footer_wrap");
  // $(".goods__bottom").load("http://localhost:81/html/public.html .bottom_wrap");
  require(["../js/rendermodules.js"],function(res){
    res("goods")
  })
})();

//加载时请求ajax数据,并且渲染数据
(function () {
  var goodsrender = {};
  var objId = {};
  window.onload = function () {
    let str = window.location.search;
    objId.id = str.slice(1).split("&")[0].split("=")[1];
    objId.time = str.slice(1).split("&")[1].split("=")[1];
    $.ajax({
      url: "http://localhost:81/data/goods.json",
      success: (res) => {
        var arrGoods = JSON.parse(res).arr[objId.time].inner.msg;
        console.log(arrGoods)
        goodsrender = arrGoods.filter((val) => {
          if (val.Id === objId.id) return val;
        });
        goodsrender = goodsrender[0];
        render(goodsrender);
      },
    });
  };

  function render(msg) {
    str = `
      <div class="goods_main_left fl">
        <div class="sbox">
          <img
            src="${msg.goodsmsg}"
            alt=""
          />
          <span></span>
          <p></p>
        </div>
        <div class="bbox">
          <img src="${msg.goodsmsg}" alt="" />
        </div>
      </div>
      <div class="goods_main_middle clearfix fl">
        <h2>${msg.goods}</h2>
        <div class="price">含税价 ￥${msg.price2}/套</div>
        <table>
          <tbody>
            <tr>
              <th>订货号</th>
              <td>XXXXXXX</td>
            </tr>
            <tr>
              <th>商品型号</th>
              <td>XXXXXXX</td>
            </tr>
            <tr>
              <th>重量</th>
              <td>XXXXXXX</td>
            </tr>
            <tr>
              <th>库存</th>
              <td>${msg.nownumber}</td>
            </tr>
            <tr>
              <th>售出</th>
              <td>${msg.sellnumber}</td>
            </tr>
          </tbody>
        </table>
        <div class="joinCart">
          <a class="joinCartbtn" data_id="${msg.Id}" >加入购物车</a>
        </div>
      </div>
      <div class="goods_main_right fr">
        <div class="goods_main_right_top">
          <img src="../images/goods/pic_product_side_qrcode.png" alt="" />

          <img src="../images/goods/pic_product_side_feas.png" alt="" />
          <img
            src="../images/goods/wKigOVyxg9uAAVH5AACSCImQ7Eg303.jpg"
            alt=""
          />
        </div>
        <div class="goods_main_right_bottom">
          <h6>服务说明</h6>
          <p>
            1、由工品汇发货，并提供售后服务
            2、因库存实时变化，具体发货时间以实际发货为
          </p>
          <h6>售前咨询</h6>
          <p>400-049-6999</p>
        </div>
      </div>`;
    $(".goods_main").html(str);
    new Zou();
    addCart();
  }

  function addCart() {
    // 商品列表
    class List {
      constructor() {
        this.obox = $(".joinCartbtn")[0];
        this.addEvent();
        this.select();
      }
      addEvent() {
        let that = this;
        this.obox.addEventListener(
          "click",
          function (eve) {
            let e = eve || window.event;
            let tar = e.target || e.srcElement;
            that.id = this.getAttribute("data_id");
            that.setData();
          },
          false
        );
      }
      select() {
        ajaxEX({
          url: "http://localhost:81/data/goods.json",
          success: (res) => {
            this.arr = JSON.parse(res).arr[0].inner.msg;
            this.time = objId.time;
          },
        });
      }

      setData() {
        this.data = $.cookie("goodsMsg") ?
          JSON.parse($.cookie("goodsMsg")) : [];
        if (this.data.length < 1) {
          this.data.push({
            id: this.id,
            num: 1,
            time: this.time,
          });
        } else {
          let i = 0;
          let off = this.data.some((val, index) => {
            i = index;
            return val.id === this.id;
          });
          if (off) {
            this.data[i].num++;
          } else {
            this.data.push({
              id: this.id,
              num: 1,
              time: this.time,
            });
          }
        }
        $.cookie("goodsMsg", JSON.stringify(this.data), {
          expires: 7,
        });
        window.location.href = "http://localhost:81/html/cart.html";
      }
    }
    new List();
  }
  //添加放大镜
  class Zou {
    constructor() {
      this.sbox = document.querySelector(".sbox");
      this.ospan = document.querySelector(".sbox span");
      this.bbox = document.querySelector(".bbox");
      this.bimg = document.querySelector(".bbox img");
      this.sbW = this.sbox.offsetWidth;
      this.sbH = this.sbox.offsetHeight;
      this.addEvent();
    }

    addEvent() {
      var that = this;
      this.sbox.onmouseover = function () {
        that.bbox.style.display = "block";
        that.ospan.style.display = "block";
        that.resta();
      };
      this.sbox.onmouseout = function () {
        that.bbox.style.display = "none";
        that.ospan.style.display = "none";
      };
      this.sbox.onmousemove = function (eve) {
        var e = eve || window.event;
        that.spanMove(e);
      };
    }

    spanMove(e) {
      var osW = this.ospan.offsetWidth;
      var osH = this.ospan.offsetHeight;
      this.ospan.style.left = e.offsetX - osW / 2 + "px";
      this.ospan.style.top = e.offsetY - osH / 2 + "px";
      if (this.ospan.offsetLeft < 0) {
        this.ospan.style.left = 0;
      }
      if (this.ospan.offsetTop < 0) {
        this.ospan.style.top = 0;
      }
      if (this.ospan.offsetLeft > this.sbW - osW) {
        this.ospan.style.left = this.sbW - osW + "px";
      }
      if (this.ospan.offsetTop > this.sbH - osH) {
        this.ospan.style.top = this.sbH - osH + "px";
      }
      this.bigMove(osW, osH);
    }
    bigMove(osW, osH) {
      //比例问题。别弄错了
      this.bimg.style.left =
        (this.ospan.offsetLeft / (this.sbW - osW)) *
        (this.bbox.offsetWidth - this.bimg.offsetWidth) +
        "px";
      this.bimg.style.top =
        (this.ospan.offsetTop / (this.sbH - osH)) *
        (this.bbox.offsetHeight - this.bimg.offsetHeight) +
        "px";
    }

    resta() {
      this.ospan.style.width =
        (this.bbox.offsetWidth / this.bimg.offsetWidth) *
        this.sbox.offsetWidth +
        "px";
      this.ospan.style.height =
        (this.bbox.offsetHeight / this.bimg.offsetHeight) *
        this.sbox.offsetHeight +
        "px";
    }
  }
})();